<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条件渲染</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<!--
条件渲染:
1.v-if
写法:
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法:v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
-->
<div id="app">

    <p v-if="seen">现在你看到我了</p>
    <p v-show="seen">现在你看到我了</p>
    <div v-if="n===1">n=1</div>
    <div v-else-if="n===2">n=2</div>
    <div v-else-if="n===3">n=3</div>
    <div v-else-if="n===4">n=4</div>
    <div v-else>n=else</div>
    <button @click="addN">n++</button>
    <button @click="ce">点击</button>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#app',
        data: {
            seen: true,
            n: 0
        },
        methods: {
            ce() {
                this.seen = !this.seen
            }, addN() {
                this.n++
            }
        }
    })
</script>
</html>